<!DOCTYPE html>
<html>
<head>
<title>Tickaboom</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="./gamestyle.css">
</head>
<body>

<div class="gameboard"></div>

<script>

Array.prototype.shuffle = function() {
	var currentIndex = this.length, temporaryValue, randomIndex ;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {
		// Pick a remaining element...
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;

		// And swap it with the current element.
		temporaryValue = this[currentIndex];
		this[currentIndex] = this[randomIndex];
		this[randomIndex] = temporaryValue;
	}

	return this;
}

// Game object houses main game parts
var Game = function() {
	this.gameboard = $("div.gameboard");
	this.gametable = $("<table class=gametable></table>").appendTo(this.gameboard);
	this.gametbody = $("<tbody></tbody>").appendTo(this.gametable);
	this.squares = [];

	for(var y = 0; y < 9; y++) {
		this.squares[y] = [];
		var row = $("<tr></tr>").appendTo(this.gametbody);
		for(var x = 0; x < 9; x++) {
			var square = new Square(y, x);
			this.squares[y][x] = square;
			square.el.appendTo(row);
		}
	}
	this.boom = new Boom();
}

// a square object represents a square on the game board, 
// its position, its ticks (the dots on the board), and the 
// behavior when you click on the square
var Square = function(y, x) {
	// sample tick to clone for each tick
	var xTick = $("<span class=tick></span>");

	// position on the board
	this.y = y;
	this.x = x;

	// the array of ticks in this square
	this.ticks = [];
	// the corners only get one tick max
	if     ((x == 0 || x == 8) && (y == 0 || y == 8)) this.maxTicks = 1;
	// the sides get 2
	else if((x == 0 || x == 8) || (y == 0 || y == 8)) this.maxTicks = 2;
	// everything else gets 3 ticks before going boom
	else                                              this.maxTicks = 3;
	// the DOM element that represents this square on the screen
	var el = $("<td class=square></td>");
	this.el = el;
	var square = this;
	// when you click the element, add a tick to the board
	el.click(function() {
		square.addTick();
		game.boom.execute();
	});
	this.addTick = function() {
		var tick = xTick.clone().appendTo(el);
		this.ticks.push(tick);
		game.boom.squares.push(this);
	}

	this.boom = function() {
		if(this.ticks.length > this.maxTicks) {
			var square = this;
			$.each([ [y-1,x], [y,x+1], [y+1, x], [y, x-1] ], function(i, c) {
				var y = c[0], x = c[1], nextSquare;
				if(game.squares[y] && game.squares[y][x]) { nextSquare = game.squares[y][x]; }
				if(nextSquare) {
					var tick = square.ticks.pop().remove();
					nextSquare.addTick();
				}
			});
		}
	}
}

var Boom = function() {
	this.squares = [];
	// squares will be added to the array in rounds. 
	// when you click a square, it will be added to a round and then the round is executed
	// as the round is executed, any squares that get a tick added will be added to the next round, 
	// and then that round will execute
	this.execute = function() {
		var boom = this;
		if(this.squares.length > 0) {
			var currentRoundSquares = this.squares; 
			this.squares = [];
			currentRoundSquares.shuffle();
			// each square will boom in intervals of 50ms 
			// when all are done, the next round will execute
			for(var i = 0, square; 0 < currentRoundSquares.length; i++) {
				var square = currentRoundSquares.shift();
				(function(square) { 
					setTimeout(function() { 
						square.boom(); 
						if(currentRoundSquares.length == 0) { 
							setTimeout(function() { boom.execute(); }, 100); 
						}
					}, i*100);
				})(square);
			}
		} else {
			// when this happens, the turn is over
		}
	}
}

var game;
$(function() {
	game = new Game();
});
</script>
</body>
</html>
